<div class="layui-fluid layui-anim febs-anim" id="export-excel" lay-title="导出页面">
    <div class="febs-container layui-card">
        <div class="layui-card-body">
            <div id="query-project-form">
                <form method="post" class="layui-form" lay-filter="export-detail-table-form" id="export-detail-table-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">年份</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="year" id="date-select">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">月份</label>
                        <div class="layui-input-block">
                            <div id="month-select"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目名称</label>
                        <div class="layui-input-block">
                            <div id="project-select"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板类型</label>
                        <div class="layui-input-block">
                            <select name="excelType" lay-verify="select-month">
                                <option value="1">含第三方</option>
                                <option value="2" shiro:hasPermission="test">含管理成本及补助减免</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 120px">
                            <div id="history-month-select"></div>
                        </div>
                        <label class="layui-form-label">预算确认</label>
                        <div class="layui-inline" style="margin-left: 10px">
                            <div class="layui-form-mid layui-word-aux" id="confirm-text">该月预算未确认</div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn-sm febs-button-blue-plain" id="confirm-budget">
                                确认预算
                            </button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">收入导出方式</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="choice" value="1"  id="subShow-select " title="按项目(包含业务明细)" checked>
                                <input type="radio" name="choice" value="2"  id="subNoShow-select" title="不包含业务明细" >
                                <input type="radio" name="choice" value="0"  id="bySub-select" title="按业务">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">按照所选项目排序</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="orderByPro" value="1" title="是" checked>
                                <input type="radio" name="orderByPro" value="0" title="否" >
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" shiro:hasPermission="export:single" class="layui-btn" id="exportData">
                                子表导出
                            </button>
                            <button type="button" shiro:hasPermission="export:main" class="layui-btn" id="exportMainData">
                                主表导出
                            </button>
                            <!--暂放-->
                            <button type="button" shiro:hasPermission="export:template" class="layui-btn" id="exportWord">
                                工资导出
                            </button>
                            <button type="button" shiro:hasPermission="export:income" class="layui-btn" id="exportIncome" >
                                收入导出
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script data-th-inline="none" type="text/javascript">
    layui.use(['laydate', 'jquery', 'laydate', 'febs', 'form', 'eleTree', 'table', 'validate', 'xmSelect', 'layer', 'upload'], function () {
        let $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            form = layui.form,
            xmSelect = layui.xmSelect,
            companyXmSelect,
            $view = $('#export-excel'),
            projectInfo = {},
            $exportData = $view.find('#exportData'),
            $exportMainData = $view.find('#exportMainData'),
            $exportWord = $view.find('#exportWord'),
            $exportIncome = $view.find('#exportIncome'),
            $exportDetailTableForm = $view.find('#export-detail-table-form'),
            $dateSelect = $view.find('#date-select'),
            $confirmBudget = $view.find('#confirm-budget'),
            $layer = layui.layer,
            upload = layui.upload,
            historyMonthList = [],
            monthList = [],
            monthXmSelect,
            historyMonthXmSelect,
            excelTypeSelect,
            confirmed = [],
            projectList = [],
            projectXmSelect;

        laydate.render({
            elem: '#date-select',
            type: 'year',
            done: function (value, data) {
                changeHistoryMonthList()
                getProject()
                historyMonthXmSelect.update(
                    {data: historyMonthList}
                )
            },
            value: new Date().getFullYear()
        });

        form.render();

        getMonthList();
        changeHistoryMonthList();

        function getMonthList() {
            for (let i = 1; i <= 12; i++) {
                monthList.push({ name: i + '月', value: i})
            }
        }

        function changeHistoryMonthList() {
            const date = new Date();
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            let params = $exportDetailTableForm.serializeJson();
            let selectYear = params.year === '' ? year : parseInt(params.year)
            historyMonthList = []
            if (year > selectYear) {
                historyMonthList = []
                for (let i = 1; i <= 12; i++) {
                    if (i === 12) {
                        historyMonthList.push({ name: i + '月', value: i, selected: true})
                    } else {
                        historyMonthList.push({ name: i + '月', value: i})
                    }
                }
                changeConfirmed(12)
            } else if (year === selectYear) {
                historyMonthList = []
                for (let i = 1; i <= month; i++) {
                    if (i === month - 1) {
                        historyMonthList.push({ name: i + '月', value: i, selected: true})
                    } else {
                        historyMonthList.push({ name: i + '月', value: i})
                    }
                }
                changeConfirmed(month - 1)
            }
        }

        monthXmSelect = xmSelect.render({
            el: '#month-select',
            toolbar: {show: true},
            name: 'month',
            theme: {color: '#52c41a'},
            prop: {
                name: 'name',
                value: 'value'
            },
            height: 450,
            data: monthList,
            done: function (value, data) {
                getProject()
            }
        });

        historyMonthXmSelect = xmSelect.render({
            el: '#history-month-select',
            radio: true,
            name: 'historyMonth',
            theme: {color: '#1abec4'},
            clickClose: true,
            prop: {
                name: 'name',
                value: 'value'
            },
            data: historyMonthList,
            on: function(value) {
                if (value.arr.length > 0) {
                    changeConfirmed(value.arr[0].value)
                } else {
                    changeConfirmed('-1')
                }
            }
        });

        projectXmSelect = xmSelect.render({
            el: '#project-select',
            toolbar: {show: true},
            filterable: true,
            autoRow: true,
            theme: {color: '#0270f8'},
            height: 260,
            name: 'projectId',
            data: []
        });

        function getProject() {
            let params = $exportDetailTableForm.serializeJson();
            febs.get(ctx + 'project', {needPermission: true, needCost: true, year: params.year}, function (result) {
                projectList = []
                projectList = result.data;
                let data = [];
                for (let i = 0; i < projectList.length; i++) {
                    let e = {};
                    e.value = projectList[i].id;
                    e.name = projectList[i].projectName;
                    data[i] = e;
                }
                projectXmSelect.update(
                    {data: data}
                )
            });
        }

        getProject()

        $exportData.on('click', function () {
            let params = $exportDetailTableForm.serializeJson();
            console.log(params)
            if (!params.year) {
                febs.alert.error("请选择年份");
                return;
            }
            if (!params.month) {
                febs.alert.error("请选择月份");
                return;
            }
            if (!params.excelType) {
                febs.alert.error("请选择模板类型");
                return;
            }
            if (!params.projectId) {
                febs.alert.error("请选择项目");
                return;
            }
            febs.download(ctx + 'detailCost/exportSingle', params, params.year + '项目分表.xlsx', projectList);
        });

        $exportMainData.on('click', function () {
            let params = $exportDetailTableForm.serializeJson();
            if (!params.year) {
                febs.alert.error("请选择年份");
                return;
            }
            febs.download(ctx + 'detailCost/exportMainTable', params, params.year +'项目主表.xlsx');
        });

        $exportWord.on('click', function () {
            let params = $exportDetailTableForm.serializeJson();
            if (!params.year) {
                febs.alert.error("请选择年份");
                return;
            }
            if (!params.month) {
                febs.alert.error("请选择月份");
                return;
            }
            const months = params.month.split(',')
            if (months.length > 1) {
                febs.alert.error("只能选择一个月份");
                return;
            }
            if (!params.projectId) {
                febs.alert.error("请选择项目");
                return;
            }
            febs.download(ctx + 'salary/exportTemplate', params, params.year+'年'+params.month+'月'+'工资发放.doc');
        });

        $exportIncome.on('click', function () {
            let params = $exportDetailTableForm.serializeJson();
            console.log(params)
            if (!params.year) {
                febs.alert.error("请选择年份");
                return;
            }
            if (!params.month) {
                febs.alert.error("请选择月份");
                return;
            }
            if (!params.excelType) {
                febs.alert.error("请选择模板类型");
                return;
            }
            if (!params.projectId) {
                febs.alert.error("请选择项目");
                return;
            }
            febs.download(ctx + 'export/exportIncome', params, params.year + '未开票收入统计.xlsx');
        });

        febs.post(ctx + 'estimateHistory/queryConfirmed', null, function (result) {
            confirmed = result.data;
            changeConfirmed()
        });

        function changeConfirmed(month) {
            let params = $exportDetailTableForm.serializeJson();
            if (month === null || month === undefined) {
                month = params.historyMonth
            }
            let historyMonth = parseInt(month) < 10 ? '0' + month : month
            const nowYearMonth = params.year + '-' + historyMonth
            let isConfirmed = false
            confirmed.forEach(e => {
                if (e === nowYearMonth) {
                    isConfirmed = true
                }
            })
            let string = isConfirmed ? '该月预算已确认' : '该月预算未确认';
            $view.find("#confirm-text").text(string)
        }

        $confirmBudget.on('click', function () {
            
            let params = $exportDetailTableForm.serializeJson()
            if (!params.year) {
                febs.alert.error("请选择年份");
                return;
            }
            if (params.historyMonth === undefined || params.historyMonth === null || params.historyMonth === '') {
                febs.alert.error("请选择月份");
                return;
            }
            febs.modal.confirm('确认预算', '确定确认' + params.year + '年' + params.historyMonth + '月预算？', function () {
                febs.post(ctx + 'estimateHistory/confirm', params, function () {
                    febs.alert.success('已确认' + params.year + '年' + params.historyMonth + '月预算')
                    febs.post(ctx + 'estimateHistory/queryConfirmed', null, function (result) {
                        confirmed = result.data
                        changeConfirmed()
                    });
                })
            });
        });

    });
</script>